<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>生产销售质控</title>
    <link rel="stylesheet" href="../src/css/modal.css">
    <link rel="stylesheet" href="../src/css/index.css">
    <script>
        (function setPageScale(window, document) {
            function setBodyScale() {
                var zoom = (window.innerHeight / 1080).toFixed(3)
                if (document.body) {
                    document.body.style.transform = 'translate(-50%, -50%) scale(' + zoom + ')';
                } else {
                    document.addEventListener('DOMContentLoaded', setBodyScale)
                }
            }
            setBodyScale();
            // reset scale unit on page resize窗口改变时候重新设置缩放
            window.addEventListener('resize', setBodyScale)
            window.addEventListener('pageshow', function (e) {
                if (e.persisted) {
                    setBodyScale()
                }
            })
        }(window, document))
    </script>
    <!--[if lt IE 9]> 
         <script src="../src/js/html5shiv.min.js"></script>
    <![endif]-->
</head>

<body>


    <div class="wrapper" id="app">
        <!-- Modal 仓库曲线图 -->
        <div class="modal fade" id="myCkModal">
            <div class="modal-dialog" style="width:720px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">仓库温度监测曲线</h4>
                    </div>
                    <div class="modal-body">
                        <div id="main-line" style="height: 250px;"></div>
                    </div>
                    <!-- <div class="modal-footer">
                        <button class="a-btn" data-dismiss="modal">返回</button>
                    </div> -->
                </div>
            </div>
        </div>
        <!-- Modal 冷链车运输温度监测曲线 -->
        <div class="modal fade" id="myLlModal">
            <div class="modal-dialog" style="width:720px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">冷链车运输温度监测曲线</h4>
                    </div>
                    <div class="modal-body">
                        <div id="main-line2" style="height: 250px;"></div>

                    </div>


                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="myModal">
            <div class="modal-dialog" style="width:1200px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">入库销售情况查询</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-box" style="background: none;margin: 0;">
                            <table>
                                <tr>
                                    <th>企业名称：</th>
                                    <td>
                                        <select class="form-control">
                                            <option>1</option>
                                            <option>2</option>
                                            <option>3</option>
                                            <option>4</option>
                                            <option>5</option>
                                        </select>
                                    </td>
                                    <th>采购单位：</th>
                                    <td>
                                        <input type="texts" class="form-control" />

                                    </td>

                                </tr>
                                <tr>
                                    <th>品种：</th>
                                    <td>
                                        <select class="form-control">
                                            <option>1</option>
                                            <option>2</option>
                                            <option>3</option>
                                            <option>4</option>
                                            <option>5</option>
                                        </select>
                                    </td>
                                    <th>批号：</th>
                                    <td>
                                        <select class="form-control">
                                            <option>1</option>
                                            <option>2</option>
                                            <option>3</option>
                                            <option>4</option>
                                            <option>5</option>
                                        </select>

                                    </td>

                                </tr>

                                <tr>
                                    <th>采购区域：</th>
                                    <td>
                                        <select class="form-control">
                                            <option>1</option>
                                            <option>2</option>
                                            <option>3</option>
                                            <option>4</option>
                                            <option>5</option>
                                        </select>
                                    </td>
                                    <th></th>
                                    <td>


                                    </td>

                                </tr>



                                <tr>
                                    <th colspan="4">
                                        <button type="button" class="a-btn">
                                            <span>提交</span>
                                        </button>

                                    </th>
                                </tr>
                            </table>
                        </div>

                        <div class="a-table-list">
                            <table>
                                <colgroup>
                                    <col style="width:90px" />
                                    <col style="width:100px" />
                                    <col style="width:110px" />
                                    <col style="width:100px" />
                                    <col style="width:110px" />
                                    <col style="width:78px" />
                                    <col style="width:78px" />
                                    <col style="width:78px" />
                                    <col style="width:88px" />
                                    <col style="width:108px" />
                                    <col style="width:88px" />
                                    <col />
                                </colgroup>
                                <thead>
                                    <tr>
                                        <td>批号</td>
                                        <td>入库数量</td>
                                        <td>累计销售数量</td>
                                        <td>库存数量</td>
                                        <td>单笔销售数量</td>
                                        <td>销售省</td>
                                        <td>销售市</td>
                                        <td>销售县</td>
                                        <td>冷链温度</td>
                                        <td>配送企业</td>
                                        <td>退货数量</td>
                                        <td>召回数量</td>
                                    </tr>
                                    </tr>
                                </thead>
                            </table>
                            <div class="scroll-content" style="max-height:290px;overflow-y: auto;overflow-x: hidden;">
                                <table>
                                    <colgroup>
                                        <col style="width:90px" />
                                        <col style="width:100px" />
                                        <col style="width:110px" />
                                        <col style="width:100px" />
                                        <col style="width:110px" />
                                        <col style="width:78px" />
                                        <col style="width:78px" />
                                        <col style="width:78px" />
                                        <col style="width:88px" />
                                        <col style="width:108px" />
                                        <col style="width:88px" />
                                        <col />
                                    </colgroup>

                                    <tbody>
                                        <tr>
                                            <td>20181003</td>
                                            <td class="eli">
                                                10000

                                            </td>
                                            <td>0</td>
                                            <td class="eli">
                                                <span class="link-detail">10000</span>

                                            </td>

                                            <td>0</td>
                                            <td class="eli" title="云南省">
                                                云南省

                                            </td>
                                            <td class="eli" title="昆明市">
                                                昆明市

                                            </td>
                                            <td class="eli" title="盘龙区">
                                                盘龙区

                                            </td>


                                            <td> <span class="link-detail">冷链数据</span></td>
                                            <td class="eli" title="配送企业1">
                                                配送企业1
                                            </td>
                                            <td>0</td>
                                            <td title="">
                                                0
                                            </td>

                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="a-btn" data-dismiss="modal">返回</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="global-content">
            <header class="header">
            </header>
            <section class="main clearfix">
                <nav class="navs">
                    <div class="nav-item">
                        <a href="./tsgz.html" class="tsgz ">
                            态势感知
                        </a>
                    </div>
                    <div class="nav-item">
                        <a href="./qyhx.html" class="qyhx ">
                            企业画像
                        </a>
                    </div>
                    <div class="nav-item">
                        <a href="./cphx.html" class="cphx">
                            产品画像
                        </a>
                    </div>
                    <div class="nav-item">
                        <a href="./tdpchx.html" class="tdpchx">
                            特定批次
                            画像
                        </a>
                    </div>

                    <div class="nav-item">
                        <a href="javascript:;" class="scxszk on">
                            生产销售质控
                        </a>
                    </div>
                </nav>
                <div class="content-box">
                    <div class="scxszk clearfix">
                        <div class="sc-left">
                            <div class="a-tit">关键物料供应商名录</div>
                            <div class="form-box" style="background: none;margin-top: 0;
                            margin-bottom: 0;
                            padding-bottom: 5px;">
                                <table>
                                    <tr>
                                        <th>企业名称：</th>
                                        <td>
                                            <select class="form-control">
                                                <option>1</option>
                                                <option>2</option>
                                                <option>3</option>
                                                <option>4</option>
                                                <option>5</option>
                                            </select>
                                        </td>

                                    </tr>
                                    <tr>
                                        <th>物料名称：</th>
                                        <td>
                                            <input type="text" class="form-control" />

                                        </td>

                                    </tr>

                                    <tr>
                                        <th>成品品种：</th>
                                        <td>
                                            <select class="form-control">
                                                <option>1</option>
                                                <option>2</option>
                                                <option>3</option>
                                                <option>4</option>
                                                <option>5</option>
                                            </select>
                                        </td>

                                    </tr>
                                    <tr>
                                        <th>供应商名称：</th>
                                        <td>
                                            <input type="texts" class="form-control" />

                                        </td>

                                    </tr>

                                    <tr>
                                        <th colspan="2">
                                            <button type="button" class="a-btn">
                                                <span>提交</span>
                                            </button>

                                        </th>
                                    </tr>
                                </table>
                            </div>
                            <div class="a-table-list">
                                <table>
                                    <colgroup>
                                        <col style="width:86px" />
                                        <col style="width:94px" />
                                        <col style="width:104px" />
                                        <col style="width:100px" />
                                        <col />

                                    </colgroup>
                                    <thead>
                                        <tr>
                                            <td>物料名称</td>
                                            <td>供应商名称</td>
                                            <td>证书效期预警</td>
                                            <td>审计时间</td>
                                            <td>审计时间预警</td>
                                        </tr>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>牛血清</td>
                                            <td class="eli" title="供应商名供应商名供应商名">
                                                供应商名供应商名供应商名

                                            </td>
                                            <td>0</td>
                                            <td>2019-03-25</td>
                                            <td>0</td>
                                        </tr>
                                        <tr>
                                            <td>牛血清</td>
                                            <td class="eli" title="供应商名供应商名供应商名">
                                                供应商名供应商名供应商名

                                            </td>
                                            <td>0</td>
                                            <td>2019-03-25</td>
                                            <td>0</td>
                                        </tr>
                                        <tr>
                                            <td>牛血清</td>
                                            <td class="eli" title="供应商名供应商名供应商名">
                                                供应商名供应商名供应商名

                                            </td>
                                            <td>0</td>
                                            <td>2019-03-25</td>
                                            <td>0</td>
                                        </tr>
                                        <tr>
                                            <td>牛血清</td>
                                            <td class="eli" title="供应商名供应商名供应商名">
                                                供应商名供应商名供应商名

                                            </td>
                                            <td>0</td>
                                            <td>2019-03-25</td>
                                            <td>0</td>
                                        </tr>
                                        <tr>
                                            <td>牛血清</td>
                                            <td class="eli" title="供应商名供应商名供应商名">
                                                供应商名供应商名供应商名

                                            </td>
                                            <td>0</td>
                                            <td>2019-03-25</td>
                                            <td>0</td>
                                        </tr>
                                        <tr>
                                            <td>牛血清</td>
                                            <td class="eli" title="供应商名供应商名供应商名">
                                                供应商名供应商名供应商名

                                            </td>
                                            <td>0</td>
                                            <td>2019-03-25</td>
                                            <td>0</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <a class="rkxs" @click="handleRKXS" data-toggle="modal" data-target="#myModal"
                                href="javascriot:;">
                                <!-- 入库销售情况查询 -->
                            </a>
                            <a class="zkzb" href="javascriot:;">
                                <!-- 中控指标风险研判 -->
                            </a>
                            <a class="ycfy" href="javascriot:;">
                                <!-- 异常反应报告统计分析 -->
                            </a>

                        </div>
                        <div class="sc-right">
                            <div class="a-tit">生产销售控制信息查询</div>
                            <div class="form-box">
                                <table>
                                    <tbody>
                                        <tr>
                                            <th>企业：</th>
                                            <td>
                                                <select class="form-control">
                                                    <option>1</option>
                                                    <option>2</option>
                                                    <option>3</option>
                                                    <option>4</option>
                                                    <option>5</option>
                                                </select>
                                            </td>
                                            <th>菌毒种批号：</th>
                                            <td>
                                                <select class="form-control">
                                                    <option>1</option>
                                                    <option>2</option>
                                                    <option>3</option>
                                                    <option>4</option>
                                                    <option>5</option>
                                                </select>
                                            </td>


                                        </tr>
                                        <tr>
                                            <th>菌毒种编号：</th>
                                            <td>
                                                <select class="form-control">
                                                    <option>1</option>
                                                    <option>2</option>
                                                    <option>3</option>
                                                    <option>4</option>
                                                    <option>5</option>
                                                </select>
                                            </td>
                                            <th></th>
                                            <td>
                                            </td>


                                        </tr>

                                        <tr>
                                            <th colspan="4">
                                                <button type="button" class="a-btn">
                                                    <span>提交</span>
                                                </button>
                                                <button type="button" class="a-btn">
                                                    <span>导出</span>
                                                </button>
                                            </th>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="tree-box scroll-box" style="height: 710px">
                                <div class="tab-group">
                                    <a href="javascript:;" class="on">毒种</a>
                                    <a href="javascript:;">细胞</a>
                                </div>
                                <button type="button" data-toggle="modal" data-target="#myCkModal" class="a-btn">
                                    <span>仓库温度监测曲线弹框</span>
                                </button>
                                <button type="button" data-toggle="modal" data-target="#myLlModal" class="a-btn">
                                    <span>冷链车运输温度监测曲线弹框</span>
                                </button>
                                <div style="height:600px; overflow: auto">
                                    <ul class="tree-wrapper" style="margin-left: 20px;">
                                        <li class="root-box" id="tree-main">
                                            <div class="tree-item a-y">
                                                <span class="a-icon a-icon-open main-icon right"></span>
                                                <h5 class="eli">
                                                    <span title="原始毒种入库">原始毒种入库</span>
                                                </h5>
                                                <p>
                                                    <span title="原始毒种名称：">产品名称：</span>
                                                </p>
                                                <p>
                                                    <span>批号：20181006</span>
                                                </p>
                                                <p>
                                                    <span>供应商：云南所
                                                    </span>
                                                </p>
                                                <p>
                                                    <span>入库编号：RA010</span>
                                                </p>
                                                <p>
                                                    <span>入库数量（支）</span>
                                                </p>
                                                <p>
                                                    <span>库存编号：C010</span>
                                                </p>
                                                <p class="eli">
                                                    <span title="库存数量（支）：100">库存数量（支）：100</span>
                                                </p>
                                            </div>

                                    </ul>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </section>
        </div>
    </div>
    <script src="../src/js/jquery.3.3.1.js"></script>
    <script src="../src/js/modal.min.js"></script>
    <script src="../src/js/echarts.js"></script>

    <script>
        $(function () {
            // $(".scroll-box").mCustomScrollbar({
            //     theme: 'dark',
            //     axis: "yx" // vertical and horizontal scrollbar
            // });
            $('#myCkModal').on('shown.bs.modal', function (e) {
                // do something...
                // 仓库
                chartLine()
                console.log(e)
            })
            $('#myLlModal').on('shown.bs.modal', function (e) {

                // lenglian
                chartLine2()
                console.log(e)
            })

            var list = [{
                'type': 'a-y',
                'title': '原',
                children: [{
                        'type': 'a-zhu',
                        'title': '主',
                        children: [{
                                'type': 'a-zhu',
                                'title': '主',
                                children: [{
                                        'type': 'a-g',
                                        'title': '工',
                                        children: [{
                                                'type': 'a-g',
                                                'title': '工',
                                                children: [{
                                                        'type': 'a-ye',
                                                        'title': '液',
                                                        children: [{
                                                                'type': 'a-c',
                                                                'title': '成',
                                                                last: 'true'
                                                            }

                                                        ]
                                                    },
                                                    {
                                                        'type': 'a-ye',
                                                        'title': '液',
                                                    }
                                                ]
                                            },
                                            {
                                                'type': 'a-g',
                                                'title': '工',
                                            }
                                        ]
                                    },
                                    {
                                        'type': 'a-g',
                                        'title': '工',
                                    }
                                ]
                            },
                            {
                                'type': 'a-zhu',
                                'title': '主'
                            }
                        ]
                    },
                    {
                        'type': 'a-x',
                        'title': '销',
                    }
                ]

            }]
            addChildren.call($('#tree-main'), list)
            $('#tree-main .main-icon').on('click', function () {

                if ($(this).hasClass('right')) {
                    if ($('#tree-main>ul').is(':visible')) {
                        $('#tree-main>ul').hide('fast')
                        $(this).removeClass('a-icon-open')

                    } else {
                        $('#tree-main>ul').show('fast')
                        $(this).addClass('a-icon-open')
                    }
                }





            })

        })


        function chartLine() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main-line'));
            // 指定图表的配置项和数据
            var lableList = ['2016年', '2017年', '2018年']
            var dataList = [
                [100, 130, 160],

            ]
            var option = {
                color: ['rgba(0, 198, 1, 1)', 'rgba(255, 41, 42, 1)'],
                grid: {
                    left: 80,
                    top: 50,
                    bottom: 40,
                    right: 40
                },
                title: {
                    text: '单位：℃',
                    textStyle: {
                        color: '#fff',
                        fontSize: 16
                    },
                    left: 10
                },

                xAxis: {
                    type: 'category',
                    data: lableList,
                    axisLabel: {
                        inside: false,
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        },
                        interval: 0, //保证所有横向坐标数据全展示不隐藏
                        margin: 10 //刻度与坐标轴距离
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true, //不显示y轴
                        symbol: ['none', 'arrow'],
                        symbolOffset: [0, 14],
                        lineStyle: {
                            color: '#67798f'
                        }
                    },
                    splitLine: {
                        show: true, //纵向网格线
                        lineStyle: {
                            color: ['#334c69']
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        inside: false,
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        },
                        // interval: 0,
                        margin: 20 //刻度与坐标轴距离
                    },
                    axisTick: {
                        show: false //不显示刻度
                    },
                    axisLine: {
                        show: true, //不显示y轴
                        symbol: ['none', 'arrow'],
                        symbolOffset: [0, 14],
                        lineStyle: {
                            color: '#67798f'
                        }
                    },
                    splitLine: {
                        show: false, //横向网格线
                        lineStyle: {
                            color: ['#334c69']
                        }
                    },
                    splitArea: {
                        show: true, //横向网格区域
                        areaStyle: {
                            color: ['rgba(0, 70, 255, 0.1)', 'rgba(5,39,75,0)']
                        }
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 横坐标指示器
                        type: 'line',
                        lineStyle: {
                            color: 'rgba(0,0,0,0)'
                        }
                    },
                    // alwaysShowContent: true, //悬浮后一直显示
                    // 自定义悬浮提示框内容（数据处理后加单位）
                    backgroundColor: 'rgba(0,0,0,0)',
                    // formatter(params) { // params的个数等于折线的条数（对多条折线数据进行加单位，就需要遍历）
                    //     var relVal =
                    //         '<div class="bg_2_tip" style="text-align:left;padding:20px 30px;font-size:14px "><span style="color:#fff;font-size:20px;">' +
                    //         params[0].name + '</span>' + (params[0] ? '<br><span class="color-blue-2">' + params[0]
                    //             .seriesName + '<span class="color-yellow-2 f20 pl10">' + params[0].value +
                    //             '</span>亿元</span>' : '') + '' + (params[1] ? '<br><span class="color-blue-2">' +
                    //             params[1].seriesName + '<span class="color-yellow-2 f20 pl10">' + params[1].value +
                    //             '</span>亿元</span>' : '') + '</div>'
                    //     return relVal
                    // }
                },
                series: [{
                    name: '温度',
                    type: 'line',
                    data: dataList[0],
                    // symbol: 'circle', //
                    symbolSize: 12
                }, {
                    name: '利润',
                    type: 'line',
                    data: dataList[1],
                    symbolSize: 12
                }]
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);


        }

        function chartLine2() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main-line2'));
            // 指定图表的配置项和数据
            var lableList = ['2016年', '2017年', '2018年']
            var dataList = [
                [100, 130, 160],

            ]
            var option = {
                color: ['rgba(255, 41, 42, 1)', 'rgba(0, 198, 1, 1)'],
                grid: {
                    left: 80,
                    top: 50,
                    bottom: 40,
                    right: 40
                },
                title: {
                    text: '单位：℃',
                    textStyle: {
                        color: '#fff',
                        fontSize: 16
                    },
                    left: 10
                },

                xAxis: {
                    type: 'category',
                    data: lableList,
                    axisLabel: {
                        inside: false,
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        },
                        interval: 0, //保证所有横向坐标数据全展示不隐藏
                        margin: 10 //刻度与坐标轴距离
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true, //不显示y轴
                        symbol: ['none', 'arrow'],
                        symbolOffset: [0, 14],
                        lineStyle: {
                            color: '#67798f'
                        }
                    },
                    splitLine: {
                        show: true, //纵向网格线
                        lineStyle: {
                            color: ['#334c69']
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        inside: false,
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        },
                        // interval: 0,
                        margin: 20 //刻度与坐标轴距离
                    },
                    axisTick: {
                        show: false //不显示刻度
                    },
                    axisLine: {
                        show: true, //不显示y轴
                        symbol: ['none', 'arrow'],
                        symbolOffset: [0, 14],
                        lineStyle: {
                            color: '#67798f'
                        }
                    },
                    splitLine: {
                        show: false, //横向网格线
                        lineStyle: {
                            color: ['#334c69']
                        }
                    },
                    splitArea: {
                        show: true, //横向网格区域
                        areaStyle: {
                            color: ['rgba(0, 70, 255, 0.1)', 'rgba(5,39,75,0)']
                        }
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 横坐标指示器
                        type: 'line',
                        lineStyle: {
                            color: 'rgba(0,0,0,0)'
                        }
                    },
                    // alwaysShowContent: true, //悬浮后一直显示
                    // 自定义悬浮提示框内容（数据处理后加单位）
                    backgroundColor: 'rgba(0,0,0,0)',
                    // formatter(params) { // params的个数等于折线的条数（对多条折线数据进行加单位，就需要遍历）
                    //     var relVal =
                    //         '<div class="bg_2_tip" style="text-align:left;padding:20px 30px;font-size:14px "><span style="color:#fff;font-size:20px;">' +
                    //         params[0].name + '</span>' + (params[0] ? '<br><span class="color-blue-2">' + params[0]
                    //             .seriesName + '<span class="color-yellow-2 f20 pl10">' + params[0].value +
                    //             '</span>亿元</span>' : '') + '' + (params[1] ? '<br><span class="color-blue-2">' +
                    //             params[1].seriesName + '<span class="color-yellow-2 f20 pl10">' + params[1].value +
                    //             '</span>亿元</span>' : '') + '</div>'
                    //     return relVal
                    // }
                },
                series: [{
                    name: '温度',
                    type: 'line',
                    data: dataList[0],
                    // symbol: 'circle', //
                    symbolSize: 12
                }, {
                    name: '温度',
                    type: 'line',
                    data: dataList[1],
                    symbolSize: 12
                }]
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);


        }

        function addChildren(data) {
            var _this = this
            var childrenLevel = 0
            var html = ''
            if (_this.children('ul').length == 0) {
                _this.append('<ul></ul>')
            }
            var $ul = $(_this.children('ul')[0])
            $ul.html('')

            for (var i = 0; i < data.length; i++) {
                var item = data[i]
                var $li = $('<li></li>')
                if (item.type == 'a-c') {
                    // 成
                    html = `<div class="tree-item a-c">
                       <h5 class="eli">
                         <span style="display:${item.last?'none':''}" class="a-icon ${i==0?'a-icon-open':''} " data-type="${item.type}" data-added="${i==0?'true':'false'}"></span>
                        <span title="成品">成品</span>
                    </h5>
                    <p class="eli">
                        <span class="eli" title="产品名称：冻干人用狂犬产品名称：冻干人用狂犬">产品名称：冻干人用狂犬产品名称：冻干人用狂犬…</span>
                    </p>
                    <p class="eli">
                        <span class="eli" title="产品批号：20190110">产品批号：20190110</span>
                    </p>
                    <p class="eli">
                        <span class="eli" title="亚批号：20190110-2">亚批号：20190110-2</span>
                    </p>
                    <p class="eli">
                        <span class="eli" title="入库数量（支）：100">入库数量（支）：100</span>
                    </p>
                    <p class="eli">
                        <span class="eli" title="库存数量：100">库存数量：100</span>
                    </p>
                    <p class="eli">
                        <span class="eli a-click-style" >点击查看仓库温度检测</span>
                    </p>
                   
                </div>`
                }
                if (item.type == 'a-k') {
                    // 库
                    html = `<div class="tree-item a-k">
                            <span style="display:${item.last?'none':''}" class="a-icon ${i==0?'a-icon-open':''} " data-type="${item.type}" data-added="${i==0?'true':'false'}"></span>
                    <h5 class="eli">
                        <span title="批签发合格入库">批签发合格入库</span>
                    </h5>
                    <p class="eli">
                        <span class="eli" title="产品名称：冻干人用狂犬产品名称：冻干人用狂犬">产品名称：冻干人用狂犬产品名称：冻干人用狂犬…</span>
                    </p>
                    <p class="eli">
                        <span class="eli" title="产品批号：20190110">产品批号：20190110</span>
                    </p>
                    <p class="eli">
                        <span class="eli" title="亚批号：20190110-2">亚批号：20190110-2</span>
                    </p>
                    <p class="eli">
                        <span class="eli" title="入库数量（支）：100">入库数量（支）：100</span>
                    </p>
                    <p class="eli">
                        <span class="eli" title="库存数量：100">库存数量：100</span>
                    </p>
                    <p class="eli">
                        <span class="eli a-click-style" >点击查看仓库温度检测</span>
                    </p>
                   
                </div>`
                }
                if (item.type == 'a-x') {
                    // 销
                    html = `<div class="tree-item a-x">
                            <span style="display:${item.last?'none':''}" class="a-icon ${i==0?'a-icon-open':''} " data-type="${item.type}" data-added="${i==0?'true':'false'}"></span>
                    <h5 class="eli">
                        <span title="成品销售">成品销售</span>
                    </h5>
                    <p class="eli">
                        <span class="eli" title="产品名称：冻干人用狂犬…">产品名称：冻干人用狂犬…</span>
                    </p>
                    <p class="eli">
                        <span class="eli" title="产品批号：20190110-3">产品批号：20190110-3</span>
                    </p>
                    <p class="eli">
                        <span class="eli" title="销售时间：2019-05-04-2">销售时间：2019-05-04-2</span>
                    </p>
                    <p class="eli">
                        <span class="eli" title="销售数量（支）：100">销售数量（支）：100</span>
                    </p>
                    <p class="eli">
                        <span class="eli a-click-style" >点击查看销售流向地图</span>
                    </p>
                   
                </div>`

                }
                if (item.type == 'a-z') {
                    // 召
                    html = `<div class="tree-item a-z">
                            <span style="display:${item.last?'none':''}" class="a-icon ${i==0?'a-icon-open':''} " data-type="${item.type}" data-added="${i==0?'true':'false'}"></span>
                    <h5 class="eli">
                        <span title="成品召回">成品召回</span>
                    </h5>
                    <p class="eli">
                        <span class="eli" title="产品名称：冻干人用狂犬…">产品名称：冻干人用狂犬…</span>
                    </p>
                    <p class="eli">
                        <span class="eli" title="产品批号：20190110-3">产品批号：20190110-3</span>
                    </p>
                    <p class="eli">
                        <span class="eli" title="数量：43-05-04-2">数量：43</span>
                    </p>
                    <p class="eli">
                        <span class="eli" title="召回日期：2019-10-10">召回日期：2019-10-10</span>
                    </p>
                   
                </div>`

                }
                if (item.type == 'a-t') {
                    // t退
                    html = `<div class="tree-item a-t">
                            <span style="display:${item.last?'none':''}" class="a-icon ${i==0?'a-icon-open':''} " data-type="${item.type}" data-added="${i==0?'true':'false'}"></span>
                    <h5 class="eli">
                        <span title="销售退货">销售退货</span>
                    </h5>
                    <p class="eli">
                        <span class="eli" title="产品名称：冻干人用狂犬…">产品名称：冻干人用狂犬…</span>
                    </p>
                    <p class="eli">
                        <span class="eli" title="产品批号：20190110-3">产品批号：20190110-3</span>
                    </p>
                    <p class="eli">
                        <span class="eli" title="批量：21">批量：21</span>
                    </p>
                    <p class="eli">
                        <span class="eli" title="退货日期：2019-10-10">退货日期：2019-10-10</span>
                    </p>
                    <p class="eli">
                        <span class="eli" title="退货商：XXXX">退货商：XXXX</span>
                    </p>
                    <p class="eli">
                        <span class="eli" title="退货原因：XXXX">退货原因：XXXX</span>
                    </p>
                   
                </div>`

                }
                if (item.type == 'a-f') {
                    // 废
                    html = `<div class="tree-item a-f">
                            <span style="display:${item.last?'none':''}" class="a-icon ${i==0?'a-icon-open':''} " data-type="${item.type}" data-added="${i==0?'true':'false'}"></span>

                    <h5 class="eli">
                        <span title="成品报废">成品报废</span>
                    </h5>
                    <p class="eli">
                        <span class="eli" title="产品名称：冻干人用狂犬…">产品名称：冻干人用狂犬…</span>
                    </p>
                    <p class="eli">
                        <span class="eli" title="产品批号：20190110-3">产品批号：20190110-3</span>
                    </p>
                    <p class="eli">
                        <span class="eli" title="批量：21">批量：21</span>
                    </p>
                    <p class="eli">
                        <span class="eli" title="报废日期：2019-10-10">报废日期：2019-10-10</span>
                    </p>
                    <p class="eli">
                        <span class="eli" title="报废原因：">报废原因：</span>
                    </p>
                </div>`
                }
                if (item.type == 'a-y') {
                    //源

                    html = `<div class="tree-item a-y">
                            <span style="display:${item.last?'none':''}" class="a-icon ${i==0?'a-icon-open':''} " data-type="${item.type}" data-added="${i==0?'true':'false'}"></span>

                    <h5 class="eli">
                        <span title="原液配置">原液配置</span>
                    </h5>
                    <p class="eli">
                        <span class="eli" title="原液名称：">原液名称： </span>
                    </p>
                    <p class="eli">
                        <span class="eli" title="原液批号：2018XDV01-3">原液批号：2018XDV01</span>
                    </p>
                    <p class="eli">
                        <span class="eli" title="产品批号：20181006s">产品批号：20181006</span>
                    </p>
                    <p class="eli">
                        <span class="eli" title="产生时间：2018-10-06">产生时间：2018-10-06</span>
                    </p>
                  
                </div>`
                }
                if (item.type == 'a-ye') {
                    //液
                    html = `<div class="tree-item a-ye">
                            <span style="display:${item.last?'none':''}" class="a-icon ${i==0?'a-icon-open':''} " data-type="${item.type}" data-added="${i==0?'true':'false'}"></span>

                    <h5 class="eli">
                        <span title="原液配置">原液配置</span>
                    </h5>
                    <p class="eli">
                        <span class="eli" title="原液名称：">原液名称： </span>
                    </p>
                    <p class="eli">
                        <span class="eli" title="原液批号：2018XDV01-3">原液批号：2018XDV01</span>
                    </p>
                    <p class="eli">
                        <span class="eli" title="产品批号：20181006s">产品批号：20181006</span>
                    </p>
                    <p class="eli">
                        <span class="eli" title="产生时间：2018-10-06">产生时间：2018-10-06</span>
                    </p>
                  
                </div>`
                }

                if (item.type == 'a-zhu') {
                    //主
                    html = `<div class="tree-item a-zhu">
                            <span style="display:${item.last?'none':''}" class="a-icon ${i==0?'a-icon-open':''} " data-type="${item.type}" data-added="${i==0?'true':'false'}"></span>

                    <h5 class="eli">
                        <span title="主代毒种领用">主代毒种领用</span>
                    </h5>
                    <p class="eli">
                        <span class="eli" title="领用数量（支）：">领用数量（支）： </span>
                    </p>
                    <p class="eli">
                        <span class="eli" title="领用时间：a2018-10-01-3">领用时间：a2018-10-01</span>
                    </p>
                    <p class="eli">
                        <span class="eli" title="编号：031，030">编号：031，030</span>
                    </p>
                  
                </div>`
                }

                if (item.type == 'a-g') {
                    //工
                    html = `<div class="tree-item a-g">
                            <span style="display:${item.last?'none':''}" class="a-icon ${i==0?'a-icon-open':''} " data-type="${item.type}" data-added="${i==0?'true':'false'}"></span>

                    <h5 class="eli">
                        <span title="工作毒种">工作毒种</span>
                    </h5>
                    <p class="eli">
                        <span class="eli" title="工作毒种名称：">工作毒种名称： </span>
                    </p>
                    <p class="eli">
                        <span class="eli" title="数量：-10-01-3">数量：-10-01</span>
                    </p>
                    <p class="eli">
                        <span class="eli" title="批号：G201806g">批号：G201806g</span>
                    </p>
                    <p class="eli">
                        <span class="eli" title="编号：099">编号：099</span>
                    </p>
                    <p class="eli">
                        <span class="eli" title="产生时间：2018-10-06">产生时间：2018-10-06</span>
                    </p>
                  
                </div>`
                }




                $li.html(html)
                if (item.children) {
                    (function () {
                        addChildren.call($li, item.children)
                    }($li, item.children));

                }
                $ul.append($li)
            }
            $ul.find('>li >div>.a-icon').on('click', function (e) {
                e.stopPropagation()
                $(this).toggleClass('a-icon-open')
                var $root = $(this).parent('div').parent('li')
                console.log($(this).data('type'))
                if (!$(this).data('added')) {
                    // var data = getChildrenData.call($root)
                    // var data = $root.getChildrenData()

                    var addData = data; //获取新的在子级 
                    debugger
                    if (data.length) {

                        addChildren.call($root, data)
                        // $root.addChildren(data)
                        $(this).data('added', true)

                        $root.find('>ul>li:visible').hide()
                    } else {
                        $(this).remove()
                    }
                }
                var children = $root.find(' > ul > li')
                var siblingLis = $root.siblings()
                if (children.is(':visible')) {
                    children.hide('fast')
                } else {
                    children.show('fast')
                    siblingLis.find(' > ul > li').hide()
                    siblingLis.find('>div>.a-icon').removeClass('a-icon-open')
                }
            })

            // $('li ul').each(function () {
            //     $(this).find('>li:last-child').addClass('after-none')
            // })
        }
    </script>

</body>

</html>